<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="130px">
      <h2 style="text-align: center">化学品入库</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="入库序号" prop="code">
            <el-input disabled v-model="formData.code" placeholder="系统自动生成" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="deptId">
            <el-cascader :props="{ value: 'id', checkStrictly: true }" :show-all-levels="false" ref="reference"
              placeholder="请选择部门" :style="{ width: '100%' }" v-model="formData.deptId"
              :options="deptOptions"></el-cascader>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="索引" prop="joinIndex">
            <el-input v-model="formData.joinIndex" placeholder="请输入索引" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="入库日期" prop="joinDate">
            <el-date-picker v-model="formData.joinDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择入库日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应品名称" prop="chemistryGoodsDirectoryId">
            <el-select filterable v-model="formData.chemistryGoodsDirectoryId" placeholder="请选择供应品名称" clearable @change="changeMl"
              :style="{ width: '100%' }">
              <el-option v-for="(item, index) in muSelectList" :key="index" :label="item.name"
                :value="item.chemistryGoodsDirectoryId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位" prop="unitValue">
            <el-select v-model="formData.unitValue" placeholder="请选择单位" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in dict.type.goods_unit_type" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="数量" prop="num">
            <el-input-number v-model="formData.num" placeholder="请输入数量" clearable :style="{ width: '100%' }" :step="1"
              controls-position="right">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="CAS号" prop="cas">
            <el-input v-model="formData.cas" placeholder="请输入CAS号" :disabled="true" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有效期" prop="limitDate">
            <el-date-picker v-model="formData.limitDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择有效期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保管人" prop="managerUserId">
            <UserDialogInCon @clear="clear" :disabled="$route.query.isInfo || isInfo" placeholder="请输入保管人"
              @change="changeUser" v-model="formData.managerUserId"></UserDialogInCon>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="技术指标" prop="tecTarget">
            <el-input
              disabled
              v-model="formData.tecTarget"
              placeholder="请输入技术指标"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="8">
          <el-form-item label="规格" prop="spec">
            <el-input
              disabled
              v-model="formData.spec"
              placeholder="请输入规格"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="主要用途" prop="useInfo">
            <el-input disabled v-model="formData.useInfo" placeholder="请输入主要用途" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="技术要求" prop="techInfo">
            <el-input disabled v-model="formData.techInfo" placeholder="请输入技术要求" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入多行文本备注" :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <h4 class="form-header h4" style="margin-top: 20px">验收记录</h4>
      <el-form-item label="" prop="file">
        <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.file"></FileUpload>
      </el-form-item>

      <el-col :span="24" v-if="btnShow">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  consume_JoinAdd,
  updategconsume_Join,
  consume_JoinInfo,
} from "@/api/quality/goods/consumeIn.js";
import { selectList as muSelect } from "@/api/quality/goods/directory.js";
import { deptTreeSelect } from "@/api/system/user.js";
import store from "@/store";
import UserDialogInCon from '@/components/UserDialogInCon/index'
export default {
  dicts: ["goods_unit_type"],
  components: { UserDialogInCon },
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      carSelectList: [],
      formData: {
        chemistryGoodsDirectoryId: "",
        managerUserId: "83,48",
        managerUser: '宣若佳,王蕴吉',
        name: undefined,
        code: undefined,
        categoryValue: undefined,
        levelValue: undefined,
        tecTarget: undefined,
        // spec: undefined,
        num: undefined,
        unitValue: undefined,

        tecTarget: undefined,
        file: "",
        joinDate: "",
        limitDate: "",
        deptId: undefined,
        useInfo: undefined,
        techInfo: undefined,
      },
      deptOptions: [],

      rules: {
        chemistryGoodsDirectoryId: [
          {
            required: true,
            message: "请选择供应品",
            trigger: "change",
          },
        ],
        cas: [
          {
            required: false,
            message: "请输入CAS",
            trigger: "blur",
          },
        ],
        file: [
          {
            required: false,
            message: "请上传附件",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: false,
            message: "批次入库批次自动生成",
            trigger: "blur",
          },
        ],
        categoryValue: [
          {
            required: true,
            message: "请选择类别",
            trigger: "change",
          },
        ],
        levelValue: [
          {
            required: true,
            message: "请选择管控等级",
            trigger: "change",
          },
        ],
        tecTarget: [
          {
            required: true,
            message: "请输入技术指标",
            trigger: "blur",
          },
        ],
        deptId: [
          {
            required: true,
            
            message: "请选择部门",
            trigger: "change",
          },
        ],
        // spec: [
        //   {
        //     required: true,
        //     message: "请输入规格",
        //     trigger: "blur",
        //   },
        // ],
        unitValue: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        managerUserId: [
          {
            required: true,
            message: "请选择保管人",
            trigger: "change",
          },
        ],
        limitDate: [
          {
            required: false,
            message: "请选择有效期",
            trigger: "change",
          },
        ],
        useInfo: [
          {
            required: true,
            message: "请输入主要用途",
            trigger: "blur",
          },
        ],
        techInfo: [
          {
            required: true,
            message: "请输入技术要求",
            trigger: "blur",
          },
        ],
        joinDate: [
          {
            required: true,
            message: "请选择入库日期",
            trigger: "change",
          },
        ],
        joinIndex: [
          {
            required: true,
            message: "请输入索引",
            trigger: "change",
          },
        ]
      },
      muSelectList: [],
    };
  },
  computed: {},
  created() {
    this.muSelect();
    this.getDeptTree();
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
  },
  mounted() { },
  methods: {
    muSelect() {
      muSelect({ chemicals: 1 }).then((response) => {
        this.muSelectList = response.data;
      });
    },
    clear() {
      this.formData.managerUserId = ''
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        this.formData.deptId = store.state.user.dept.deptId
      });
    },
    changeUser(e) {
      console.log(e);
      this.formData.managerUser = e;
    },
    changeMl(i) {
      let row = this.muSelectList.find((e) => e.chemistryGoodsDirectoryId == i);
      if (row) {
        this.formData.name = row.name;
        // this.formData.spec = row.spec;
        // this.formData.num = row.num;
        this.formData.tecTarget = row.tecTarget;
        this.formData.useInfo = row.useInfo;
        this.formData.techInfo = row.techInfo;
        this.formData.cas = row.cas;
        // this.formData.dept = row.dept;
        // this.formData.code = row.code;
      } else {
        this.formData.name = undefined;
        // this.formData.spec = undefined;
        this.formData.useInfo = undefined;
        this.formData.techInfo = undefined;
        // this.formData.num = undefined;
        this.formData.tecTarget = undefined;
        this.formData.cas = undefined;
        // this.formData.dept = undefined;
      }
    },
    getinfo() {
      return consume_JoinInfo(this.$route.query.id || this.id).then(
        (response) => {
          this.formData = response.data;
        }
      );
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
          query.dept = this.$refs.reference.getCheckedNodes()[0].label;
          query.unitLabel = this.dict.type.goods_unit_type.find(
            (e) => e.value === query.unitValue
          ).label;
          query.chemicals = 1;
          if(Array.isArray(query.managerUserId)){
            query.managerUserId = query.managerUserId.toString()
          }
          if (this.formData.consumeGoodsJoinId != undefined) {
            updategconsume_Join(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            consume_JoinAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
<style scoped>
.upload-file-uploader {
  margin-bottom: 5px;
}

.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}

.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}

.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
</style>
